<style lang="less" scoped>
@import url("./less/index.less");
</style>

<template>
  <div class="contain">
    <div class="box1" v-drag>
      <el-input v-model="inputData.val" @input="setInputData(inputData)"></el-input>
    </div>
    <div class="tablebox1" v-drag>
      <el-table :data="form_data" style="width: 100%"
       @row-click="clickData"
      >
        <el-table-column prop="oid" label="订单编号"> </el-table-column>
        <el-table-column prop="type" label="类别"> </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  data() {
    return {
      form_data: [
        {
          oid: 20201201,
          type: "鲁班锁",
          state: "检测中",
        },
      ].concat(
        Array(10).fill({
          oid: 20201201,
          type: "鲁班锁",
          state: "检测中",
        })
      ),
      inputData:{
        name:'testInput',
        val:'',
      },
    };
  },
  // 注册局部组件指令
  directives: {
    drag: function(el) {
      //   获取需要拖拽的元素
      let dragBox = el;
      dragBox.onmousedown = (e) => {
        //计算鼠标和元素边框之间的距离
        let x = e.clientX - dragBox.offsetLeft;
        let y = e.clientY - dragBox.offsetTop;
        document.onmousemove = (e) => {
          // 鼠标现在的位置减去鼠标与元素边框的距离就是元素现在的位置
          let left = e.clientX - x;
          let top = e.clientY - y;
          dragBox.style.left = left + "px";
          dragBox.style.top = top + "px";

          // 改变元素的透明度
          dragBox.style.opacity = 0.5;
        };
        dragBox.onmouseup = (e) => {
          // 抬起鼠标停止移动
          document.onmousemove = null;
          dragBox.style.opacity = 1;
          //防止鼠标移动上去还会移动
          document.onmouseup = null;
        };
      };
    },
  },
  methods: {
        ...mapMutations('inputModule',['setInputData']),
        ...mapMutations('clickModule',['setClickData']),
        clickData(item){
          console.log("ok");
          console.log(item);
          // this.clickData(item)
          this.setClickData(item)
        }
  },

  //生命周期 - 创建完成
  created() {
    // console.log(this.$store.state.inputModule.val);
  },
  //DOM挂载完毕
  mounted() {},
};
</script>
